import { Component, ReactNode,lazy,Suspense } from 'react'

// resolve类型处理
type Iresolve = (params:Promise<any>) => void

// 利用基于webpack代码分割的能力
// let Other = lazy(()=>import (/*webpackChunkName:'other'*/'./Other'))

let Other = lazy(()=>new Promise((resolve:Iresolve,rejects) => {
    setTimeout(()=>{
        // resolve(import ('./Other'))
        rejects('error 一个错误')
    },2000)
}))

// 利于的基于webpack代码分割的能力
class LazyCom extends Component {
    render(): ReactNode {
        return(
            <fieldset>
                <legend>懒加载组件</legend>
                {/* Suspense一般用于包裹异步组件，处理降级降级的ui效果 */}
                <Suspense fallback={<h1>正在加载中...</h1>}>
                    <Other/>
                </Suspense>
            </fieldset>
        )
    }
}
export default LazyCom